<template>
  <div> </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { uuid } from 'ele-admin-pro/es';
  import type { UserItem } from '@/api/form/advanced/model';
  import type { ColumnsType } from 'ant-design-vue/es/table';
  import { conditionalTypes } from '../tableFilter.data';
  import { VxeColumnProps } from 'vxe-table';

  const dataSource = ref<any[]>([]);

  const props = defineProps({
    filterCols: {
      type: Array<VxeColumnProps>,
      default: () => {
        return [];
      }
    }
  });
  // 列
  const columns = reactive<ColumnsType>([
    {
      title: '字段',
      key: 'FieldName',
      width: 100
    },
    {
      title: '比较符',
      key: 'ConditionalType',
      width: 110
    },
    {
      title: '值',
      key: 'FieldValue'
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 80
    }
  ]);
  const formatConditionalType = (value: any) => {
    const row = conditionalTypes.find((x) => x.value == value);
    return row ? row?.label : value;
  };

  const formatFieldName = (value: any) => {
    const row = props.filterCols.find((x) => x.field == value);
    return row ? row?.title : value;
  };

  /* 添加 */
  const add = () => {
    dataSource.value.push({
      key: uuid(8),
      isEdit: true,
      FieldName: props.filterCols[0].field,
      ConditionalType: '0',
      FieldValue: ''
    });
  };

  /* 编辑 */
  const edit = (_row: UserItem, index: number) => {
    dataSource.value[index].isEdit = true;
  };

  /* 完成编辑 */
  const done = (_row: UserItem, index: number) => {
    dataSource.value[index].isEdit = false;
  };

  /* 删除 */
  const remove = (_row: UserItem, index: number) => {
    dataSource.value.splice(index, 1);
  };
</script>
